<m-center>
  <m-card [autoHeight]="true">
    <ng-container card-head>
      <m-key-search [useRouteQueryParam]="true">
        <div>
          <m-button-icon color="secondary" class="mr-3" (click)="expolt()">
            导出
          </m-button-icon>
          <m-button-icon color="secondary" class="mr-3" [routerLink]="['./certification']">
            资产设备认证
          </m-button-icon>
        </div>
      </m-key-search>
    </ng-container>



    <m-data-table *ngIf="result$ | async as result" [data]="result.list" [result]="result" [selection]="selection"
      [sortable]="Sortable" [sortUseRouteQueryParam]="true">
      <ng-container mDataTableColumn="name" header="终端别名">
        <ng-template let-name="name" let-hostname="host_name" let-id="id" let-index="$index">
          <td>
            <a [mDetailRouterLink]="{ id: id, name: name, type: 'computer' }">
              {{ name || hostname }}
            </a>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="备注">
        <ng-template let-remark="remark">
          <td>{{ remark }}</td>
        </ng-template>
      </ng-container>

      <ng-container mDataTableColumn header="IP地址">
        <ng-template let-ip="ip">
          <td>{{ ip }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="区域名称">
        <ng-template let-area="area_name">
          <td>{{ area }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="设备归属地">
        <ng-template let-location="location_name">
          <td>{{ location }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="在线状态">
        <ng-template let-online="online">
          <td>
            <m-online-status-text [status]="online"></m-online-status-text>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="need_upgrade" header="系统更新">
        <ng-template let-upgrade="need_upgrade">
          <td>
            <m-update-status-text [status]="upgrade"></m-update-status-text>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="client_version" header="客户端版本">
        <ng-template let-client="client_version">
          <td> {{ client ||'未知'}}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="status" header="状态">
        <ng-template let-status="status">
          <td>
            <m-enable-status-text [status]="status"></m-enable-status-text>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="update_admin_username" header="编辑人">
        <ng-template let-admin="update_admin_username">
          <td>{{ admin }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="updated_at" header="改动时间">
        <ng-template let-updated_at="updated_at">
          <td>{{ updated_at | date }}</td>
        </ng-template>
      </ng-container>

      <ng-container mDataTableColumn header="操作">
        <ng-template let-pc>
          <td>
            <button mat-icon-button [matMenuTriggerFor]="editMenu">
              <mat-icon>edit</mat-icon>
            </button>
            <mat-menu #editMenu>
              <button mat-menu-item [mDetailRouterLink]="{ id: pc.id, name: pc.name, type: 'computer' }">
                详情
              </button>
              <button mat-menu-item [matMenuTriggerFor]="updateMenu">
                更新
              </button>
              <ng-container *ngIf="pc.status === Status.Enable; else enableTpl">
                <button mat-menu-item (click)="status(Status.Disable, pc.id)">停用</button>
              </ng-container>
              <ng-template #enableTpl>
                <button mat-menu-item (click)="status(Status.Enable, pc.id)">启用</button>
              </ng-template>

              <button mat-menu-item (click)="delete(pc)">删除</button>
            </mat-menu>
            <mat-menu #updateMenu>
              <button mat-menu-item (click)="upgrade([pc.id])">更新系统</button>
              <button mat-menu-item (click)="upgradeSoftware(pc.id)">更新软件</button>
            </mat-menu>
          </td>
        </ng-template>
      </ng-container>


      <m-pagination [pageSize]="result.pageSize" [length]="result.total">
        <div>
          <button class="btn btn-secondary btn-sm mr-3" (click)="selection.select(result.list)">
            全选
          </button>
          <button class="btn btn-secondary btn-sm" [matMenuTriggerFor]="batchMenu">批量操作</button>
          <mat-menu #batchMenu>
            <button mat-menu-item (click)="status(Status.Disable)">停用</button>
            <button mat-menu-item (click)="status(Status.Enable)">启用</button>
            <button mat-menu-item [matMenuTriggerFor]="batchUpdateMenu">
              更新
            </button>
            <button mat-menu-item (click)="delete()">删除</button>
            <mat-menu #batchUpdateMenu>
              <button mat-menu-item (click)="upgrade()">更新系统</button>
              <button mat-menu-item (click)="upgradeSoftware()">更新软件</button>
            </mat-menu>
          </mat-menu>
        </div>
      </m-pagination>


    </m-data-table>






  </m-card>
  <m-history [type]="'computer'" [length]="8"></m-history>
</m-center>